<template>
	<view class="trade-inner" @click="closeBox">
		<view class="tab" v-if="type == 1">
			<view class="buy uni-bg-up" :class="openStatus == 2 ? 'normal' : ''" @click="onChangeType(1)">开多</view>
			<view class="sell uni-bg-down " :class="openStatus == 1 ? 'normal' : ''" @click="onChangeType(2)">开空</view>
		</view>
		<view class="tab" v-else>
			<view class="sell uni-bg-down " :class="openStatus == 1 ? 'normal' : ''" @click="onChangeType(2)">平多</view>
			<view class="buy uni-bg-up" :class="openStatus == 2 ? 'normal' : ''" @click="onChangeType(1)">平空</view>
		</view>
		<view>
			<view class="select-group uni-row">
				<view class="select-input uni-row" @click="showBox" @click.stop="showBox" @tap.stop="showBox">
					<view style="flex: 3;">
						<view class="strate-current" v-for="(item,index) in localContractStrategy" :key="index" v-if="item.active">{{item.name}}</view>
						<view class="select-box uni-column" v-show="isShowBox==1">
							<view :class="item.active ? 'select-item-active':'select-item'" v-for="(item,index) in localContractStrategy"
							 :key="index" v-if="type==1||(type==2&&item.supportClose)" @click="changeStratege(item.id)">{{item.name}}</view>
						</view>
					</view>
					<span style="flex: 1;" class="input-button">Ⅴ</span>
				</view>
				<view class="select-leverage" v-if="type==1&&balance!=null ">
					{{openStatus==1?balance.longLeverage:balance.shotLeverage}}X
				</view>
				<view class="select-leverage" v-else-if="type==2&&balance!=null">
					{{openStatus==2?balance.longLeverage:balance.shotLeverage}}X
				</view>
			</view>
			<view class="flex-row uni-flex igroup">
				<span style="flex: 2;" class="iholder">平衡价</span>
				<view style="flex: 3;">
					<input v-model="martinPara.price" class="iinput" type="digit" />
				</view>
				<span style="flex: 1;" class="iunit">USD</span>
			</view>
			<view class="uni-row button-group">
				<view :class="item.active?levelGroup.active:levelGroup.inactive" @click="setBloodLevel(index,item.value)" v-for="(item,index) in levelGroup.btns"
				 :key="index">{{item.name}}</view>
			</view>
			<view class="uni-row button-group">
				<view :class="item.active?bloodRangGroup.active:bloodRangGroup.inactive" @click="setBloodRange(index,item.value)"
				 v-for="(item,index) in bloodRangGroup.btns" :key="index">{{item.name}}</view>
			</view>
			<view class="flex-row uni-flex igroup">
				<span style="flex: 2;" class="iholder">数量</span>
				<view style="flex: 3;">
					<input v-model="martinPara.mount" class="iinput" type="digit" />
				</view>
				<span style="flex: 1;" class="iunit">张</span>
			</view>
			<view class="uni-row button-group" v-if="mountRangeGroup!=null">
				<view :class="item.active?mountRangeGroup.active:mountRangeGroup.inactive" @click="setMountRange(index,item.value)"
				 v-for="(item,index) in mountRangeGroup.btns" :key="index">{{item.name}}</view>
			</view>
			<view style="margin-top:5px" v-if="balance!=null">
				<view class="contract-btn" v-if="type == 1&& openStatus==1">
					<view class="uni-h7 uni-text-gray">可用{{balance.availableQty}}</view>
					<view class="uni-h7 uni-text-gray">可开多{{balance.longContractNum}}张 </view>
				</view>
				<view class="contract-btn" v-else-if="type == 1&& openStatus==2">
					<view class="uni-h7 uni-text-gray">可用{{balance.availableQty}}</view>
					<view class="uni-h7 uni-text-gray">可开空{{balance.shortContractNum}}张</view>
				</view>
				<view class="contract-btn" v-else-if="type == 2&& openStatus==1">
					<view class="uni-h7 uni-text-gray">可平{{balance.shortAvailQty}}</view>
					<view class="uni-h7 uni-text-gray">持仓{{balance.shortQty}}</view>
				</view>
				<view class="contract-btn" v-else-if="type == 2&& openStatus==2">
					<view class="uni-h7 uni-text-gray">可平{{balance.longAvailQty}} </view>
					<view class="uni-h7 uni-text-gray">持仓{{balance.longQty}}</view>
				</view>
			</view>
			<button class="btn uni-bg-up" style="margin-top: 5px;" v-if="type == 1&& openStatus==1" @tap="preView('BUY_LONG',martinPara)">开多预览</button>
			<button class="btn uni-bg-down" style="margin-top: 5px;" v-else-if="type == 1&& openStatus==2" @tap="preView('BUY_SHORT',martinPara)">开空预览</button>
			<button class="btn uni-bg-up" style="margin-top: 5px;" v-else-if="type == 2&& openStatus==1" @tap="preView('SELL_SHORT',martinPara)">平空预览</button>
			<button class="btn uni-bg-down" style="margin-top: 5px;" v-else-if="type == 2&& openStatus==2" @tap="preView('SELL_LONG',martinPara)">平多预览</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			}

		},
		data() {
			return {
				openStatus: 1,
				leverage: null,
				balance: null,
				contract: null,
				showArrow: false,
				selectItem: 1,
				isShowBox: 0,
				martinPara: {
					mount: '',
					direction: '',
					price: '',
					instrumentId: '',
					leverage: '',
					level: '1',
					bloodRange: 0.02
				},
				mountRangeGroup: null,
				levelGroup: {
					active: "button-wrap-active",
					inactive: "button-wrap",
					btns: [{
							active: true,
							name: "半级",
							value: 0.5
						},
						{
							active: false,
							name: "一级",
							value: 1
						},
						{
							active: false,
							name: "一级半",
							value: 1.5
						},
						{
							active: false,
							name: "二级",
							value: 2
						}
					]
				},
				bloodRangGroup: {
					active: "button-wrap-active",
					inactive: "button-wrap",
					btns: [{
							active: true,
							name: "跨度2%",
							value: 0.02
						},
						{
							active: false,
							name: "跨度3%",
							value: 0.03
						},
						{
							active: false,
							name: "跨度4%",
							value: 0.04
						},
						{
							active: false,
							name: "跨度5%",
							value: 0.05
						}
					]
				},
				localContractStrategy: []
			}
		},
		// watch: {
		// 	type(val) {
		// 		this.openStatus = val
		// 	}
		// },		
		mounted() {
			this.localContractStrategy = this.ContractStrategy
			this.mountRangeGroup = this._MountRangeGroup
			this.fresh()
			uni.$on("contractFresh", this.fresh)
			uni.$on("freshStrategy", this.freshStrategy)
			uni.$emit('orderFresh')
		},
		methods: {
			onChangeType(e) {
				this.cleanPara()
				this.openStatus = e;
				this.$emit("openStatus", e)
			},
			cleanPara() {
				this.martinPara = {
					mount: '',
					direction: '',
					price: '',
					instrumentId: '',
					leverage: '',
					level: '1',
					bloodRange: 0.02
				}
				this.cleanGroup(this.mountRangeGroup)
			},
			showBox() {
				console.log("show box")
				if (this.isShowBox == 0) {
					this.isShowBox = 1
				} else {
					this.isShowBox = 0
				}

			},
			closeBox() {
				console.log("close box")
				this.isShowBox = 0
			},
			changeStratege(e) {
				for (var i = 0; i < this.ContractStrategy.length; i++) {
					if (e == this.ContractStrategy[i].id) {
						this.ContractStrategy[i].active = true
					} else {
						this.ContractStrategy[i].active = false
					}
				}
				this.$emit("changeStrategy", {
					index: e
				})

			},
			setBloodLevel(index, level) {
				this.changeGroup2(index, this.levelGroup)
				if (this.hasActive(this.levelGroup)) {
					this.martinPara.level = level
				}
			},

			setBloodRange(index, bloodRange) {
				this.changeGroup2(index, this.bloodRangGroup)
				if (this.hasActive(this.bloodRangGroup)) {
					this.martinPara.bloodRange = bloodRange
				}
			},

			setMountRange(index, rate) {
				this.changeGroup(index, this.mountRangeGroup)
				if (this.hasActive(this.mountRangeGroup)) {
					console.log("set moutn range " + this.type + "   " + this.openStatus)
					if (this.type == "1" && this.openStatus == "1") { // 开多
						this.martinPara.mount = Math.floor(this.balance.longContractNum * rate / 100)
					} else if (this.type == "1" && this.openStatus == "2") { //开空
						this.martinPara.mount = Math.floor(this.balance.shortContractNum * rate / 100)
					} else if (this.type == "2" && this.openStatus == "1") { //平空
						this.martinPara.mount = Math.floor(this.balance.shortAvailQty * rate / 100)
					} else if (this.type == "2" && this.openStatus == "2") { // 平多
						this.martinPara.mount = Math.floor(this.balance.longAvailQty * rate / 100)
					}
				} else {
					this.martinPara.mount = ''
				}

			},
			preView(e, martin) {
				console.log("===========preView=======")
			    uni.showToast({
			    	title:'尚未开放'
			    })
				
				// martin.direction = e
				// if (this.martinPara.direction == "BUY_LONG" || this.martinPara.direction == "SELL_LONG")
				// 	this.martinPara.leverage = this.balance.longLeverage
				// else
				// 	this.martinPara.leverage = this.balance.shotLeverage

				// if (this.assertNotEmpty(this.martinPara.instrumentId, "合约标识为空") &&
				// 	this.assertBigThanZero(this.martinPara.price, "价格设置不合理") &&
				// 	this.assertNotEmpty(this.martinPara.direction, "方向不明确") &&
				// 	this.assertBigThanZero(this.martinPara.mount, "合约张数要大于0")) {
				// 	uni.navigateTo({
				// 		url: '/pages/trade/preview?previewType=blood&martinPara=' + JSON.stringify(this.martinPara)
				// 	})
				// }
			},
			setContract() {
				this.contract = this.getDefaultContract()
				this.martinPara.instrumentId = this.contract.instrument_id
			},
			getBalance() {
				uni.request({
					url: this.api + '/futures/contract/' + this.getDefaultContract().instrument_id,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log('getBalance Resp:')
						console.log(res.data.data)
						if (res.data.data != null) {
							this.balance = res.data.data
						} else {
							this.balance = null
						}
					}
				});
			},
			fresh: function() {
				console.log("fresh balance leverage contract")
				this.setContract()
				this.getBalance()
			},
			freshStrategy: function() {
				console.log('freshStrategy')
				if (!this.getActive(this.localContractStrategy).supportClose) this.changeStratege(0)
			}
		}
	}
</script>

<style>
	.trade-inner .tab {
		position: relative;
		display: flex;
		text-align: center;
	}

	.igroup {
		border: 1px solid #E4E3E3;
		height: 58upx;
		align-items: center;
		margin-top: 15upx;
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.button-group {
		margin-top: 15upx;
		/* border: #000000 1px solid; */
		height: 50upx;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.igroup span {
		display: inline-flex;
		align-items: center;
		font-size: 0.8em;
	}

	.iinput {
		text-align: right;
		padding-right: 20upx;
	}

	.iholder {
		color: #A6A4A4;
	}

	.iunit {
		color: #A6A4A4;
	}

	.place {
		text-align: left;
	}

	.trade-inner .tab .buy {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .sell {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .normal {
		background: #ECECF6;
		color: #555555;
		font-weight: bold;
	}

	.trade-inner .tab .parallelogram {
		position: absolute;
		left: calc(50% - 19upx);
		top: 0;
		transform: translate(-50%, -50%);
		width: 36upx;
		height: 74upx;
		background: #ffffff;
		-webkit-transform: skew(-30deg);
		-moz-transform: skew(-30deg);
		-o-transform: skew(-30deg);
		transform: skew(-30deg);
	}

	.trade-inner .price-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input input {
		position: relative;
		padding-right: 180upx;
	}

	.trade-inner .price-input .opt {
		display: flex;
		position: absolute;
		top: 2upx;
		right: 0;
		width: 180upx;
		height: 78upx;
		line-height: 78upx;
	}

	.trade-inner .num-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input .opt .button {
		border: 0;
		background: #fff;
		width: 80upx;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		font-size: 48upx;
		font-weight: 400;
	}

	.trade-inner .btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.contract-btn {
		display: flex;
		flex-direction: row;
	}

	.contract-btn view {
		flex: 1;
	}

	.tab-leverr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 42upx;
	}

	.tab-leverr .lever-box {
		display: flex;
		flex-direction: row;
		border: #E1DDDD 1px solid;
		width: 48%;
	}

	.lever-box view {
		flex: 1;
		padding-left: 10px;
		color: #A6A4A4;
	}

	.lever-box view:last-child {
		text-align: right;
		padding-right: 10px;
	}
</style>
